<template>
	<swiper class="swiper-container"  @change="changeAcitveIndex" :current="current" >
		<swiper-item v-for="(item,index) in navList" :key="item._id">
			<view class="swiper-item">
				<ListItem :more="more" @loadmore="loadmore" :list="articleData[index]"></ListItem>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
export default {
		name:"ArticleList",
		props:{
			navList:{
				type:Array
			},
			current: {
				type:Number,
				default:0
			},
		},
		created() {
			if(this.navList.length) {
				this._articleList(this.current)
			}
		},
		watch: {
			navList(newval,oldval){
				// 最开始加载页面的操作
				if(JSON.stringify(newval) !== JSON.stringify(oldval)) {
					this.articleData = []
					this.loadData = {}
					this._articleList(this.current)
				}
			}
		},
		data() {
			return {
				articleData: [],
				loadData:{},
				pageSize: 6,
				more:'more'
			};
		},
		methods:{
			changeAcitveIndex(e){
				const index = e.detail.current
				this.$emit('activeIndex',index)
				if(!this.articleData[index] || !this.articleData[index].length) {
					//判断是否有数据
					this._articleList(index)
				}
			},
		async _articleList(i){
			if(!this.loadData[i]) {
				this.loadData[i] = {
					page: 1,
					loading:'loading',
					total:0
				}
			}
			const data = await this.$http.getArticleList({
				classify:this.navList[i].name,
				page:this.loadData[i].page,
				pageSize:this.pageSize
				})
			let oldList = this.articleData[i] || []
			oldList.push(...data.articleList)
			this.loadData[i].total = data.total
			// 获取数据并缓存
			this.$set(this.articleData,i,oldList)

		},
		async loadmore() {
			this.more = this.loadData[this.current].loading
			if(this.articleData[this.current].length=== this.loadData[this.current].total) {
				this.more = 'no-more'
				return
			}
			this.loadData[this.current].page++
			await this._articleList(this.current)
			this.more = 'more'
		}
	}
}
</script>

<style scoped lang="scss">
	.swiper-container{
		height: 100%;
		.swiper-item{
			height: 100%;
			overflow: hidden;
		}
	}
</style>